<template>
	<view class="">
		<commonTab class="u-padding-bottom-10" :nowCurrent="3" style="box-shadow: 0 20rpx 20rpx #eee;"></commonTab>
		<view class="main-content u-padding-20">
			
			<l-painter class="u-skeleton-rect" v-show="!posterImageData" :is-canvas-to-temp-file-path="true"
				:board="posterRenderingData" @success="painterSuccess" />
			<image v-show="posterImageData" :src="posterImageData" mode="widthFix" class="poster"></image>
			<view class="u-text-center u-padding-top-20 u-padding-bottom-20 primary">
				长按保存图片 分享海报
			</view>
			<view class="">
				<u-subsection @change="(e)=>{subsectionKey = e}"
					:list="subsectionList" :current="0" mode="subsection" active-color="#66a6ff"
					inactive-color="#000000"></u-subsection>
				<view v-show="subsectionKey == 0" class="u-grid u-margin-top-40 u-padding-left-20 u-padding-right-20">
					<view v-for="(item,index) in caseLists" :key="index" class="case u-text-center" @click="shiftStyle(index)">
						<image :lazy-load="true" :src="`${posterBasicDatas.bg}?imageView2/1/w/200/h/200/interlace/1/q/100`" mode="widthFix" class="case-bg"></image>
						<image :src="`/yixu/static/images/clock_in/${item.background}`" mode="widthFix" class="case-cover">
						</image>
						<image v-show="nowSelectCase == index" src="/yixu/static/images/clock_in/select.png" mode="widthFix"
							class="case-select"></image>
						<view class="xs">{{item.title||''}}</view>
					</view>
				</view>
				<view v-show="subsectionKey == 1" class="u-grid u-margin-top-40 bg-area u-padding-left-20 u-padding-right-20">
					<image :lazy-load="true" @click="updatePosterData('bg',item)"
						v-for="(item,index) in backgroundDatas.lists" :key="index" :src="`${item.image}?imageView2/1/w/200/h/200/interlace/1/q/100`" mode="widthFix" class="bg"></image>
				</view>
				<view v-show="subsectionKey == 2" class="content-area u-margin-top-40">
					<view class="u-padding-20 u-flex u-margin-bottom-20 content-item u-border-radius-10 u-flex"
						:class="{'select':conetntDatas.selectKey == index}"
						@click="updatePosterData('content',item);conetntDatas.selectKey = index"
						v-for="(item,index) in conetntDatas.lists" :key="index">
						<view class="u-line-1 u-flex-1">{{item.replace(/\\[nr]/g, '')}}</view>
						
						<view @tap.stop="copyContent(index)" class="xs">复制文案</view>
					</view>
				</view>
			</view>
			<xy-loading v-show="loaderStatus"></xy-loading>
		</view>
	</view>
</template>

<script>
	import commonTab from '@/yixu/pages/article_acquisition/components/common_tab.vue'
	import styleOne from './style_one'
	import styleTow from './style_tow'
	import styleThree from './style_three'
	import field from './field_correspondence'
	const {
		Lunar
	} = require('lunar-javascript')
	import {
		bgLists,
		contentLists,
		baiscInformation
	} from '@/api/checkin'
	import {
		loadingType
	} from '@/utils/type';
	import {
		copy,
		loadingFun
	} from '@/utils/tools'
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				loaderStatus: true,
				subsectionList: [{
						name: '换样式'
					},
					{
						name: '换背景'
					},
					{
						name: '换文字'
					}
				],
				subsectionKey: 0,
				// 样式列表
				caseLists: [{
					title: '日常打卡',
					background: 'case_one.png'
				}, 
				// {
				// 	title: '天气打卡',
				// 	background: 'case_tow.png'
				// }, 
				{
					title: '黄历打卡',
					background: 'case_three.png'
				}],
				// 当前选择的样式
				nowSelectCase: 0,
				// 海报图片数据
				posterImageData: '',
				// 海报渲染数据
				posterRenderingData: {},
				// 海报基础数据
				posterBasicDatas: {},
				// 内容数据
				conetntDatas: {
					page: 1,
					lists: [],
					selectKey: 0,
					status: loadingType.LOADING
				},
				// 背景数据
				backgroundDatas: {
					page: 1,
					lists: [],
					selectKey: 0,
					status: loadingType.LOADING
				}
			};
		},
		async onLoad() {
			this.initDatas()
			this.queryDatas(1)
			this.queryDatas(2)
		},
		onReachBottom() {
			if ([1, 2].indexOf(this.subsectionKey) != -1) this.queryDatas(this.subsectionKey);
		},
		methods: {
			copyContent(k){
				copy(this.conetntDatas.lists[k])
			},
			queryDatas(k) {
				let fun = bgLists;
				let dataObject = this.backgroundDatas
				if (k == 2) {
					fun = contentLists
					dataObject = this.conetntDatas
				}
				// console.log(dataObject)
				loadingFun(fun, dataObject.page, dataObject.lists, dataObject.status).then(res => {
					if (res) {
						if (k == 1) {
							this.backgroundDatas.page = res.page;
							this.backgroundDatas.lists = res.dataList;
							this.backgroundDatas.status = res.status;
						} else if (k == 2) {
							this.conetntDatas.page = res.page;
							this.conetntDatas.lists = res.dataList;
							this.conetntDatas.status = res.status;
						}
					}
				})
			},
			async initDatas() {
				let {
					data
				} = await baiscInformation();
				var d = Lunar.fromDate(new Date())
				this.posterBasicDatas = data
				this.posterBasicDatas.nyr = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
				this.posterBasicDatas.time = data.sign_time;
				this.posterBasicDatas.yi = d.getDayYi().join('、');
				this.posterBasicDatas.ji = d.getDayJi().join('、');
				this.posterBasicDatas.y = d.getMonthInChinese() + '月' + d.getDayInChinese();
				this.posterBasicDatas.ylyr = d.getYearInGanZhi() + '年 ' + d.getYearShengXiao();
				this.posterBasicDatas.hlyr = d.getMonthInGanZhi() + '月 ' + d.getDayInGanZhi() + '日';
				this.dataReplacement()
			},
			dataReplacement() {
				const _this = this
				// styleTow,
				const poster = [styleOne,  styleThree]
				let d = poster[this.nowSelectCase];
				d = JSON.stringify(d)
				Object.keys(field).map(function(v) {
					let regex = new RegExp('\\$\\{' + v + '\\}', 'g');
					d = d.replace(regex, _this.posterBasicDatas[field[v]] || '');
				})
				this.posterRenderingData = JSON.parse(d);
			},

			painterSuccess(e) {
				// console.log(new Date())
				this.posterImageData = e;
				this.loaderStatus = false;
			},
			updatePosterData(field, d) {
				if(field != 'bg' && field != 'content'){
					this.loaderStatus = true;
					this.posterBasicDatas[field] = d;
					this.posterImageData = '';
					this.dataReplacement()
				}else if(field == 'bg' && this.posterBasicDatas.bg != d.image){
					this.loaderStatus = true;
					this.posterImageData = '';
					this.posterBasicDatas.bg = d.image;
					this.posterBasicDatas.color = d.color;
					this.dataReplacement()
				}
			},
			shiftStyle(e) {
				if (this.nowSelectCase == e) return;
				this.loaderStatus = true;
				this.posterImageData = '';
				this.nowSelectCase = e;
				this.dataReplacement()
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: #FFFFFF;
		// background: linear-gradient(to bottom, rgba(120, 201, 255, 1), rgba(156, 215, 255, 1) 13.69%, rgba(224, 242, 255, 1) 22.53%, rgba(255, 255, 255, 0));

		.main-content {
			min-height: 100vh;
			border: 2rpx solid #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			background: linear-gradient(180deg, #D6EEFF 0%, #FFFFFF 54.75%, #F2F2F2 100%);
			
			.poster{
				width: 100%;
				max-width: 750rpx;
				height: 750rpx;
			}
		}

		.u-grid {
			display: grid;
			row-gap: 25rpx;
			column-gap: 25rpx;
			grid-template-columns: repeat(3, 1fr);
		}

		.case {
			width: 100%;
			position: relative;

			.case-bg {
				width: 100%;
				height: 100px;
				border-radius: 10rpx;
			}

			.case-cover {
				left: 0;
				width: 100%;
				height: 100px;
				border-radius: 10rpx;
				position: absolute;
			}

			.case-select {
				left: 0;
				width: 100%;
				height: 100px;
				border-radius: 10rpx;
				position: absolute !important;
			}
		}

		.bg-area {
			.bg {
				width: 100%;
				height: 100px;
				border-radius: 20rpx;
			}
		}

		.content-area {
			.content-item {
				background-color: #F5F5F5;

				&.select {
					color: white;
					background-color: $-color-primary;
				}
			}
		}

	}
</style>